<template>
    <div class="container">

      <!-- 健康数据模块 (默认隐藏) -->
      <div class="health-section" :class="{'active': activeTab === 'health'}" style="display: none;">
        <!-- 健康数据内容 -->
      </div>

      <!-- 生活提效模块 -->
      <div class="efficiency-section" :class="{'active': activeTab === 'efficiency'}">
        <h2 style="text-align: center; margin-bottom: 30px; color: var(--secondary);">
          <i class="fas fa-bolt" style="color: var(--efficiency);"></i>
          生活提效页
        </h2>

        <div class="preset-routes">
          <!-- 预设路线卡片 -->
          <div class="route-card">
            <div class="route-header">
              <div class="route-title">
                <div class="route-icon">
                  <i class="fas fa-home"></i>
                </div>
                回家路线
              </div>
              <div class="route-actions">
                <button class="action-btn"><i class="fas fa-edit"></i></button>
                <button class="action-btn"><i class="fas fa-trash"></i></button>
              </div>
            </div>

            <div class="route-info">
              <div class="route-detail">
                <div class="detail-label">距离</div>
                <div class="detail-value">8.5公里</div>
              </div>
              <div class="route-detail">
                <div class="detail-label">预计时间</div>
                <div class="detail-value">25分钟</div>
              </div>
              <div class="route-detail">
                <div class="detail-label">交通方式</div>
                <div class="detail-value">驾车</div>
              </div>
            </div>

            <div class="route-map">
              <div class="map-placeholder">
                <i class="fas fa-map-marked-alt"></i>
                <div>回家路线地图预览</div>
              </div>
            </div>

            <div class="route-points">
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-map-marker-alt"></i></div>
                <div class="point-text">公司 - 起点</div>
              </div>
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-arrow-down"></i></div>
                <div class="point-text">沿创业路行驶3.2公里</div>
              </div>
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-map-marker-alt"></i></div>
                <div class="point-text">阳光小区 - 终点</div>
              </div>
            </div>
          </div>

          <div class="route-card">
            <div class="route-header">
              <div class="route-title">
                <div class="route-icon">
                  <i class="fas fa-briefcase"></i>
                </div>
                上班路线
              </div>
              <div class="route-actions">
                <button class="action-btn"><i class="fas fa-edit"></i></button>
                <button class="action-btn"><i class="fas fa-trash"></i></button>
              </div>
            </div>

            <div class="route-info">
              <div class="route-detail">
                <div class="detail-label">距离</div>
                <div class="detail-value">9.2公里</div>
              </div>
              <div class="route-detail">
                <div class="detail-label">预计时间</div>
                <div class="detail-value">28分钟</div>
              </div>
              <div class="route-detail">
                <div class="detail-label">交通方式</div>
                <div class="detail-value">地铁+步行</div>
              </div>
            </div>

            <div class="route-map">
              <div class="map-placeholder">
                <i class="fas fa-subway"></i>
                <div>上班路线地图预览</div>
              </div>
            </div>

            <div class="route-points">
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-map-marker-alt"></i></div>
                <div class="point-text">阳光小区 - 起点</div>
              </div>
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-subway"></i></div>
                <div class="point-text">地铁2号线 (5站)</div>
              </div>
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-walking"></i></div>
                <div class="point-text">步行800米</div>
              </div>
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-map-marker-alt"></i></div>
                <div class="point-text">创新大厦 - 终点</div>
              </div>
            </div>
          </div>

          <div class="route-card">
            <div class="route-header">
              <div class="route-title">
                <div class="route-icon">
                  <i class="fas fa-shopping-cart"></i>
                </div>
                购物路线
              </div>
              <div class="route-actions">
                <button class="action-btn"><i class="fas fa-edit"></i></button>
                <button class="action-btn"><i class="fas fa-trash"></i></button>
              </div>
            </div>

            <div class="route-info">
              <div class="route-detail">
                <div class="detail-label">距离</div>
                <div class="detail-value">4.3公里</div>
              </div>
              <div class="route-detail">
                <div class="detail-label">预计时间</div>
                <div class="detail-value">15分钟</div>
              </div>
              <div class="route-detail">
                <div class="detail-label">交通方式</div>
                <div class="detail-value">步行+公交</div>
              </div>
            </div>

            <div class="route-map">
              <div class="map-placeholder">
                <i class="fas fa-store"></i>
                <div>购物路线地图预览</div>
              </div>
            </div>

            <div class="route-points">
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-map-marker-alt"></i></div>
                <div class="point-text">阳光小区 - 起点</div>
              </div>
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-bus"></i></div>
                <div class="point-text">公交15路 (3站)</div>
              </div>
              <div class="point-item">
                <div class="point-icon"><i class="fas fa-map-marker-alt"></i></div>
                <div class="point-text">世纪商城 - 终点</div>
              </div>
            </div>
          </div>
        </div>

        <button class="add-route-btn">
          <i class="fas fa-plus-circle"></i> 添加新路线
        </button>

        <div class="notifications-section">
          <div class="section-header">
            <div class="section-title">
              <i class="fas fa-bell"></i>
              出行信息推送
            </div>
            <div class="notification-actions">
              <button class="action-btn"><i class="fas fa-sync"></i></button>
              <button class="action-btn"><i class="fas fa-cog"></i></button>
            </div>
          </div>

          <div class="notification-list">
            <div class="notification-card">
              <div class="notification-icon">
                <i class="fas fa-cloud-sun-rain"></i>
              </div>
              <div class="notification-content">
                <div class="notification-title">下班出行提醒</div>
                <div class="notification-text">预计18:00下班时将有中雨，建议携带雨具并选择驾车路线。</div>
                <div class="notification-time">今天 15:30</div>
              </div>
            </div>

            <div class="notification-card">
              <div class="notification-icon">
                <i class="fas fa-traffic-light"></i>
              </div>
              <div class="notification-content">
                <div class="notification-title">上班路线路况</div>
                <div class="notification-text">创业路中段发生事故，拥堵2.5公里，建议提前10分钟出发。</div>
                <div class="notification-time">今天 07:15</div>
              </div>
            </div>

            <div class="notification-card">
              <div class="notification-icon">
                <i class="fas fa-subway"></i>
              </div>
              <div class="notification-content">
                <div class="notification-title">地铁运营调整</div>
                <div class="notification-text">地铁2号线本周末临时检修，部分时段停运，请选择替代路线。</div>
                <div class="notification-time">昨天 18:45</div>
              </div>
            </div>

            <div class="notification-card">
              <div class="notification-icon">
                <i class="fas fa-car"></i>
              </div>
              <div class="notification-content">
                <div class="notification-title">停车场信息</div>
                <div class="notification-text">您常去的世纪商城停车场今日满位率85%，建议使用东侧停车场。</div>
                <div class="notification-time">昨天 10:20</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
</template>
<script lang="js">
  export default {
    name: 'DingweiIndex',
    components: {
    },
    data() {
      return {
        currentDate: '',
        currentTime: '',
        activeTab: 'efficiency' // 默认显示生活提效模块
      }
    }
  }
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  //background: whitesmoke;
}

:root {
  --primary: #00b4d8;
  --secondary: #0077b6;
  --accent: #90e0ef;
  --efficiency: #2a9d8f;
  --background: #f0f8ff;
  --card-bg: #ffffff;
  --text: #1d3557;
  --text-light: #457b9d;
  --success: #2a9d8f;
  --warning: #e9c46a;
  --danger: #e63946;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

body {
  background: linear-gradient(135deg, #f0f8ff, #caf0f8);
  color: var(--text);
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  //width: 100vw;
  margin: 0 auto;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo i {
  font-size: 32px;
  color: var(--primary);
  background: rgba(0, 180, 216, 0.1);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo h1 {
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(to right, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-tabs {
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 8px;
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.nav-btn {
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  background: transparent;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-btn.active {
  background: var(--primary);
  color: white;
}

.nav-btn i {
  font-size: 18px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  box-shadow: var(--shadow);
}

.date-display {
  background: var(--card-bg);
  padding: 8px 16px;
  border-radius: 30px;
  font-weight: 600;
  color: var(--accent);
  box-shadow: var(--shadow);
}

/* 生活提效模块样式 */
.efficiency-section {
  display: none;
  animation: fadeIn 0.5s ease;
  background: white;
}

.efficiency-section.active {
  display: block;
}

.preset-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  background: white;
}

.route-card {
  width: 100vw;
  background: var(--card-bg);
  border-radius: 18px;
  padding: 25px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.route-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.route-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--efficiency);
}

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.route-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.route-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.route-icon i {
  font-size: 20px;
  color: var(--efficiency);
}

.route-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  background: var(--efficiency);
  color: white;
}

.route-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.route-detail {
  display: flex;
  flex-direction: column;
}

.detail-label {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 5px;
}

.detail-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.route-map {
  height: 180px;
  background: linear-gradient(135deg, #caf0f8, #90e0ef);
  border-radius: 12px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.map-placeholder {
  text-align: center;
  color: var(--secondary);
  font-weight: 600;
}

.map-placeholder i {
  font-size: 40px;
  margin-bottom: 10px;
  display: block;
}

.route-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.point-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.point-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--efficiency);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.point-text {
  font-size: 14px;
  color: var(--text);
}

/* 出行信息推送 */
.notifications-section {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 25px;
  box-shadow: var(--shadow);
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title i {
  color: var(--efficiency);
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.notification-card {
  display: flex;
  padding: 15px;
  border-radius: 12px;
  background: rgba(42, 157, 143, 0.05);
  border-left: 4px solid var(--efficiency);
  animation: slideIn 0.3s ease;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(42, 157, 143, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.notification-icon i {
  color: var(--efficiency);
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--secondary);
}

.notification-text {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.notification-time {
  font-size: 12px;
  color: var(--text-light);
}

.notification-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* 添加新路线按钮 */
.add-route-btn {
  background: var(--efficiency);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 15px 25px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px auto;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(42, 157, 143, 0.3);
}

.add-route-btn:hover {
  background: #238f7d;
  transform: translateY(-3px);
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

footer {
  text-align: center;
  padding: 20px;
  color: var(--text-light);
  font-size: 15px;
  margin-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .nav-tabs {
    width: 100%;
    justify-content: center;
  }

  .user-info {
    justify-content: center;
  }

  .preset-routes {
    grid-template-columns: 1fr;
  }
}
</style>